<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>待办会议</span>
      </div>
    </template>
    <div class="pending-meetings">
      <el-empty v-if="meetings.length === 0" description="暂无待办会议" />
      <el-timeline v-else>
        <el-timeline-item
          v-for="meeting in meetings"
          :key="meeting.id"
          :timestamp="meeting.startTime"
          :type="meeting.type"
        >
          <el-card class="meeting-card">
            <template #header>
              <div class="meeting-header">
                <span class="meeting-title">{{ meeting.title }}</span>
                <el-tag size="small" :type="meeting.status === 'pending' ? 'warning' : 'success'">
                  {{ meeting.status === 'pending' ? '待开始' : '进行中' }}
                </el-tag>
              </div>
            </template>
            <div class="meeting-info">
              <p><i class="el-icon-location"></i> 地点：{{ meeting.location }}</p>
              <p><i class="el-icon-user"></i> 主持人：{{ meeting.host }}</p>
              <p><i class="el-icon-time"></i> 时长：{{ meeting.duration }}分钟</p>
            </div>
            <div class="meeting-actions">
              <el-button type="primary" size="small" @click="joinMeeting(meeting.id)">加入会议</el-button>
              <el-button size="small" @click="viewDetails(meeting.id)">查看详情</el-button>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const meetings = ref([])

// TODO: 从API获取待办会议列表

const joinMeeting = (meetingId) => {
  // TODO: 实现加入会议功能
  console.log('加入会议:', meetingId)
}

const viewDetails = (meetingId) => {
  router.push(`/meeting/detail/${meetingId}`)
}
</script>

<style lang="scss" scoped>
.pending-meetings {
  padding: 20px;
}

.meeting-card {
  margin-bottom: 10px;

  .meeting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .meeting-title {
      font-weight: bold;
      font-size: 16px;
    }
  }

  .meeting-info {
    margin: 10px 0;
    color: #606266;
    font-size: 14px;

    p {
      margin: 5px 0;

      i {
        margin-right: 5px;
      }
    }
  }

  .meeting-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
}
</style>